<template>
  <view class="container">
    <view class="out">
      <input
        class="search-input"
        type="text"
        placeholder="搜索电影名"
        v-model="iptValue"
        @focus="isActive=true"
        @blur="isActive=false"
        @confirm="onSearch"
      />
      <image
        src="../../static/chicken.gif"
        mode=""
        class="pic"
        :class="isActive?'active':''"
      ></image>
      <button class="search-btn" @click="onSearch">搜索</button>
    </view>
    <button class="game-btn" @click="goToGame">抢票定位练习</button>
    <swiper
      class="swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
    >
      <swiper-item v-for="(item, idx) in banners" :key="idx">
        <view v-if="item.flag==1" class="banner-wrapper">
          <image :src="item.posterUrl" class="banner-img" mode="aspectFill"></image>
          <view class="banner-text">{{ item.smalltitle }}</view>
        </view>
      </swiper-item>
    </swiper>
    <view class="section-title">正在热映</view>
    <view class="movie-grid">
      <view
        class="movie-item"
        v-for="(movie, idx) in filteredMovies"
        :key="idx"
        @click="goToBuy(movie)"
      >
        <image :src="movie.posterUrl" class="movie-img" mode="aspectFill"></image>
        <view class="movie-title">{{ movie.title }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue";





const banners = ref([
  { img: "../../static/1.png", text: "暑期大片火热上映" },
  { img: "../../static/2.png", text: "会员专享优惠" },
  { img: "../../static/3.png", text: "新片预售开启" },
  { img: "../../static/4.png", text: "热门影院推荐" },
  { img: "../../static/5.png", text: "购票享积分" },
]);

// const hotMovies = ref([
//   { img: "../../static/1.png", name: "八角笼中" , price: 45 ,video:"https://linbeibucket.oss-cn-beijing.aliyuncs.com/1.mp4"},
//   { img: "../../static/2.png", name: "八角笼上" , price: 25 ,video:"../../static/2.mp4"},
//   { img: "../../static/3.png", name: "八角笼下" , price: 55 ,video:"../../static/3.mp4"},
//   { img: "../../static/4.png", name: "八角笼左" , price: 65 ,video:"../../static/4.mp4"},
//   { img: "../../static/5.png", name: "八角笼右" , price: 75 ,video:"../../static/5.mp4"},
//   { img: "../../static/6.png", name: "八角笼左上" , price: 95 ,video:"../../static/6.mp4"},
//   { img: "../../static/7.png", name: "八角笼左下" , price: 115 ,video:"../../static/7.mp4"},
//   { img: "../../static/8.png", name: "八角笼右上" , price: 205 ,video:"../../static/8.mp4"},
//   { img: "../../static/9.png", name: "八角笼右下" , price: 13 ,video:"../../static/9.mp4"},
// ]);


const hotMovies = ref([]); // 初始为空

const iptValue = ref("");
const isActive = ref(false);
const searchKey = ref("");

function filterBannersByFlag() {
  if (Array.isArray(banners.value)) {
    banners.value = banners.value.filter(item => item.flag === 1);
  }
}


// 搜索过滤
const filteredMovies = computed(() => {
  if (!searchKey.value) return hotMovies.value;
  return hotMovies.value.filter(movie =>
    movie.title.includes(searchKey.value)
  );
});

function onSearch() {
  searchKey.value = iptValue.value.trim();
}

// 新增防抖处理
watch(iptValue, (val) => {
  const timer = setTimeout(() => {
    searchKey.value = val.trim();
  }, 300); // 300ms防抖
  return () => clearTimeout(timer);
});

function goToBuy(movie) {
  uni.navigateTo({
    url: `/pages/buy/buy?name=${encodeURIComponent(movie.title)}&img=${encodeURIComponent(movie.posterUrl)}&price=${1000}&video=${movie.fileUrl}`
  })
}

function goToGame() {
  uni.navigateTo({
    url: '/pages/game/game'
  });
}




onMounted(() => {
  uni.request({
    url: '/api/movie', // 替换为你的后端接口
    method: 'GET',
    success: (res) => {
      // 只展示一个电影
      hotMovies.value = res.data.data; // 包装成数组
	  banners.value = res.data.data;
    filterBannersByFlag();
	  console.log(res.data.data[0].posterUrl);
		console.log(hotMovies.value);
    },
    fail: () => {
      uni.showToast({ title: '获取热映电影失败', icon: 'none' });
    }
  });
});
</script>

<style lang="scss">

.game-btn {
  width: 90%;
  margin: 20rpx auto 0 auto;
  display: block;
  height: 56rpx;
  line-height: 56rpx;
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 28rpx;
  font-size: 28rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(76,175,80,0.08);
}

.container {
  padding: 0 20rpx;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
  background: #f7f7f7;
}
.out {
  position: relative;
  margin-top: 40rpx;
  min-height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.search-input, .search-btn {
  position: relative;
  z-index: 2;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  height: 48rpx;
  font-size: 28rpx;
  padding: 0 20rpx;
  border-radius: 24rpx;
  background: #fff;
  margin-right: 8rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.search-btn {
  height: 48rpx;
  line-height: 48rpx;
  padding: 0 30rpx;
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 24rpx;
  font-size: 28rpx;
  margin-left: 8rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.pic {
  position: absolute;
  left: 43%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40rpx;
  height: 40rpx;
  z-index: 1;
  pointer-events: none;
}
.pic.active {
  top: -5rpx;
}
.swiper {
  width: 100%;
  height: 300rpx;
  margin-top: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
}
.banner-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.banner-img {
  width: 100%;
  height: 100%;
  display: block;
}
.banner-text {
  position: absolute;
  left: 20rpx;
  bottom: 20rpx;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-title {
  margin: 30rpx 0 10rpx 0;
  font-size: 32rpx;
  font-weight: bold;
}
.movie-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30rpx;
}
.movie-item {
  width: 48%;
  margin-bottom: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  padding-bottom: 10rpx;
}
.movie-img {
  width: 100%;
  height: 220rpx;
  border-radius: 12rpx;
  object-fit: cover;
}
.movie-title {
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #333;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>